<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">		 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Glide-Scroll to Specified Locations in a Scrolling Layer Onclick</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import "css/glide-grid.css";
</style>
<script src="js/dw_scrollObj.js" type="text/javascript"></script>
<script src="js/dw_glidescroll.js" type="text/javascript"></script>
<script type="text/javascript">
/*************************************************************************
  This code is from Dynamic Web Coding at www.dyn-web.com
  Copyright 2001-4 by Sharon Paine 
  See Terms of Use at www.dyn-web.com/bus/terms.html
  regarding conditions under which you may use this code.
  This notice must be retained in the code as is!
*************************************************************************/

function initScrollLayer() {
  // hide loading gif
  var load_lyr = document.getElementById? document.getElementById("loading"): document.all? document.all["loading"]: null;
  if (load_lyr) load_lyr.style.visibility = "hidden";
  
  // arguments: id of layer containing scrolling layers (clipped layer), id of layer to scroll, 
  // if horizontal scrolling, id of element containing scrolling content (table?)
  var wndo = new dw_scrollObj('wn', 'lyr1', 'imgTbl');
  
  // Read instructions if your scrolling layers are inside tables 
}
</script>	
</head>
<body onload="initScrollLayer()">

<h1>Glide-Scroll to Specified Locations Onclick</h1>

<p>The image below is one in a series of images laid out in a grid pattern.  Click the links beside the image to glide-scroll to specific locations in the grid.</p>

<div id="hold">
  <div id="wn"> 
    <!-- loading gif layer, hidden onload -->
    <div id="loading" class="content"><img src="images/loading.gif" width="99" height="16" alt="" /></div>  
    <!-- scrolling layer here -->
  	<div id="lyr1" class="content">
      <table id="imgTbl" border="0" cellpadding="0" cellspacing="0">
        <tr>
        	<td><img src="images/sunset.gif" width="150" height="150" alt="" /></td>
        	<td><img src="images/deco.gif" width="150" height="150" alt="" /></td>
        	<td><img src="images/cave-art.gif" width="150" height="150" alt="" /></td>
        	<td><img src="images/swans.gif" width="150" height="150" alt="" /></td>
        </tr>
        <tr>
        	<td><img src="images/astro.gif" width="150" height="150" alt="" /></td>
        	<td><img src="images/design1.gif" width="150" height="150" alt="" /></td>
        	<td><img src="images/mandala2.gif" width="150" height="150" alt="" /></td>
        	<td><img src="images/turtle.gif" width="150" height="150" alt="" /></td>
        </tr>
        <tr>
        	<td><img src="images/om.gif" width="150" height="150" alt="" /></td>
        	<td><img src="images/mex-sun.gif" width="150" height="150" alt="" /></td>
        	<td><img src="images/cranes.gif" width="150" height="150" alt="" /></td>
        	<td><img src="images/balloon.gif" width="106" height="131" alt="" /></td>
        </tr>
        <tr>
        	<td><img src="images/crystal.gif" width="150" height="150" alt="" /></td>
        	<td><img src="images/mandala1.gif" width="150" height="150" alt="" /></td>
        	<td><img src="images/kitty.gif" width="150" height="150" alt="" /></td>
        	<td><img src="images/heron.gif" width="100" height="100" alt="" /></td>
        </tr>
      </table>

  	</div>
	
  </div> <!-- end wn -->
  
  <div id="linksLyr">
    <table id="lnks" border="0" cellpadding="12" cellspacing="0">
    <tr>
    <!--  dw_scrollObj.scrollTo arguments: scroll area id (this is also first argument to constructor),  
          destination on x, y axes, (optional, not included here) duration of glide 
          Height and width of images and table cells determine location to glide to -->
    	<td><a href="javascript:;" onclick="dw_scrollObj.scrollTo('wn',0,0); return false">1</a></td>
    	<td><a href="javascript:;" onclick="dw_scrollObj.scrollTo('wn',180,0); return false">2</a></td>
    	<td><a href="javascript:;" onclick="dw_scrollObj.scrollTo('wn',360,0); return false">3</a></td>
    	<td><a href="javascript:;" onclick="dw_scrollObj.scrollTo('wn',540,0); return false">4</a></td>
    </tr>
    <tr>
    	<td><a href="javascript:;" onclick="dw_scrollObj.scrollTo('wn',0,180); return false">5</a></td>
    	<td><a href="javascript:;" onclick="dw_scrollObj.scrollTo('wn',180,180); return false">6</a></td>
    	<td><a href="javascript:;" onclick="dw_scrollObj.scrollTo('wn',360,180); return false">7</a></td>
    	<td><a href="javascript:;" onclick="dw_scrollObj.scrollTo('wn',540,180); return false">8</a></td>
    </tr>
    <tr>
    	<td><a href="javascript:;" onclick="dw_scrollObj.scrollTo('wn',0,360); return false">9</a></td>
    	<td><a href="javascript:;" onclick="dw_scrollObj.scrollTo('wn',180,360); return false">10</a></td>
    	<td><a href="javascript:;" onclick="dw_scrollObj.scrollTo('wn',360,360); return false">11</a></td>
    	<td><a href="javascript:;" onclick="dw_scrollObj.scrollTo('wn',540,360); return false">12</a></td>
    </tr>
    <tr>
    	<td><a href="javascript:;" onclick="dw_scrollObj.scrollTo('wn',0,540); return false">13</a></td>
    	<td><a href="javascript:;" onclick="dw_scrollObj.scrollTo('wn',180,540); return false">14</a></td>
    	<td><a href="javascript:;" onclick="dw_scrollObj.scrollTo('wn',360,540); return false">15</a></td>
    	<td><a href="javascript:;" onclick="dw_scrollObj.scrollTo('wn', 540,540); return false">16</a></td>
    </tr>
    </table>
  </div>
  
</div><!-- end hold -->

<p><em>Note:</em> Most of the images for this example are not included in the download file.</p>
<p><a href="http://www.dyn-web.com">www.dyn-web.com</a></p>

</body>
</html>
